<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link rel="stylesheet" href="client/css/index.css">
    <script src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="client/js/cookie/cookie.min.js"></script>
    <script src="client/js/user.js"></script>
    <script src="client/js/func.js"></script>
</head>
<body>
<div class="main">
    <form class="login" onsubmit="return false">
        <div class="input-item">
            <div class="username item"><label for="账号">账号</label>
                <input type="text" name="username" autocomplete="off">
            </div>
            <div class="password item"><label for="密码">密码</label>
                <input type="password" name="password" autocomplete="off">
            </div>
        </div>
        <div class="input-btn">
            <button type="submit" id="login-btn">登录</button>
        </div>
    </form>

    <div class="user">
        <div class="user-name">
            <span class="user-span-item-left">昵称：</span>
            <span class="user-span-item-right"></span></div>
        <div class="level-name">
            <span class="user-span-item-left">境界：</span>
            <span class="user-span-item-right"></span>
        </div>
        <div class="exp">
            <span class="user-span-item-left">经验</span>
            <span class="user-span-item-right"></span>
        </div>
        <div class="up-btn">
            <button type="button" id="up-level">升级</button>
        </div>
    </div>
</div>
<div id="msg"></div>

<script>
    // var wsServer = 'ws://192.168.56.1:9010';
    var wsServer = 'ws://192.168.56.1:9010';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt) {
        // let str = JSON.stringify({cmd: 0x101, uid: 1, password: 123456})
        // websocket.send(str);
        let token = user.checkLogin()
        if (token) {
            let data = {
                cmd: 0x101,
                token: token
            }
            console.log(JSON.stringify(data))
            websocket.send(JSON.stringify(data))
        }
    };

    websocket.onclose = function (evt) {
        document.getElementById('msg').innerHTML = '已断开连接'
        console.log(evt, "Disconnected");
    };

    websocket.onmessage = function (evt) {
        let data = evt.data;
        console.log('接收: ' + data);
        data = JSON.parse(data);
        if (data.cmd) {
            let cmd = data.cmd;
            cmd = '0x' + cmd.toString(16)
            //回调
            func[cmd](data)
        }
    };

    websocket.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };


    $(function () {
        let token = user.checkLogin()
        if (!token) {
            $('.main .login').show();
            //登录
            $('#login-btn').click(function () {
                let username = $('input[name="username"]').val();
                let password = $('input[name="password"]').val();
                let data = {
                    cmd: 0x101,
                    username: username,
                    password: password
                }
                websocket.send(JSON.stringify(data))
            })
        }


        //升级
        $('#up-level').click(function () {
            let data = {
                cmd: 0x103,
                token: token
            }
            console.log('发送：'+ JSON.stringify(data))
            websocket.send(JSON.stringify(data))
        })
    })


</script>
</body>
</html>